<template>
    <div class="app-container">
        <el-card class="box-cards" v-permission="'addUser'">
            <el-button type="primary" @click="onAdd">新增</el-button>
        </el-card>
        <el-table :data="tabList" border style="width: 100%">
            <el-table-column prop="id" label="编号" width="60">
                <template #default="{ row }">
                    {{ row.id }}
                </template>
            </el-table-column>
            <el-table-column prop="username" label="菜单名称">
                <template #default="{ row }">
                    {{ row.title }}
                </template>
            </el-table-column>
            <el-table-column prop="nickName" label="菜单级数">
                <template #default="{ row }">
                    {{ row.level === 0 ? "一级" : "二级" }}
                </template>
            </el-table-column>
            <el-table-column prop="email" label="前端名称">
                <template #default="{ row }">
                    {{ row.name }}
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="前端图标">
                <template #default="{ row }">
                    <i class="iconfont" :class="row.icon"></i>
                </template>
            </el-table-column>
            <el-table-column label="是否显示">
                <template #default="{ row }">
                    <el-switch v-model="row.hidden" :active-value="0" :inactive-value="1" @click="switchStatus(row)" />
                </template>
            </el-table-column>
            <el-table-column label="排序">
                <template #default="{ row }">
                    {{ row.sort }}
                </template>
            </el-table-column>
            <el-table-column label="设置">
                <template #default="{ row }">
                    <el-button link type="primary" size="small" :disabled="row.level === 0 ? false : true"
                        @click="LookForDoun(row)">查看下级</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button link type="primary" @click="Edit(row.id)" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="paginationParams.currentPage" v-model:page-size="paginationParams.pageSize"
            :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="paginationParams.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">
import * as http from "@/request/http"
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import umsTable from "@/hooks/umsTable"
import { reactive } from "vue";

const router = useRouter()

const serachVal = reactive({
    parentId: 0,
})

const { tabList,
    paginationParams,
    handleSizeChange,
    handleCurrentChange,
    getAdminList } = umsTable(http.productCate.productCategoryList, serachVal)
getAdminList()

const LookForDoun = (val: IMenuList) => {
    serachVal.parentId = val.id!
    getAdminList()
}

const onAdd = () => {
    router.push("addMenu")
}

const Edit = (id: number) => {
    router.push({ name: 'addMenu', query: { id } })
}

const switchStatus = (val: IMenuList) => {
    http.menu.menuUpdateHidden(val.id!, val.hidden).then(res => {
        if (res.code === 200) {
            ElMessage.success(res.message)
        } else {
            ElMessage.warning("更新失败请联系管理员")
            val.hidden = res.data === res.data ? res.data : val.hidden
        }
    }).catch(() => {
        ElMessage.warning("更新失败请联系管理员")
        val.hidden = val.hidden === 1 ? 0 : 1
    })
}
</script>

<style scoped lang="less">
.el-pagination {
    padding: 20px 20px;
    float: right;
}

.el-table--border {
    margin-top: 20px;
    text-align: center;
}

:deep(.iconfont) {
    color: #000;
}

:deep(.cell) {
    text-align: center;
}
</style>